<script>
import { ref } from 'vue';
export default {
  name: "InfoView",
  methods: {
    onClickLeft(){
      this.$router.push({ name: 'logged_2' });
    },
  },
  setup() {
    const columns = [
      { text: '男', value: 'male' },
      { text: '女', value: 'female' },
    ];
    const fieldValue = ref('');
    const showPicker = ref(false);

    const onConfirm = ({ selectedOptions }) => {
      showPicker.value = false;
      fieldValue.value = selectedOptions[0].text;
    };

    return {
      columns,
      onConfirm,
      fieldValue,
      showPicker,
    };
  },
}
</script>

<template>
  <div>
    <van-nav-bar
        class="bg-primary"
        title="个人信息"
        left-arrow
        @click-left="onClickLeft"
    />
    <van-cell title="头像" is-link/>
    <van-cell title="昵称" is-link value="19999999999" />
    <van-field
        v-model="fieldValue"
        is-link
        readonly
        label="性别"
        placeholder="选择性别"
        @click="showPicker = true"
    />
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
          :columns="columns"
          @cancel="showPicker = false"
          @confirm="onConfirm"
      />
    </van-popup>
    <van-cell title="生日" is-link/>

  </div>
</template>

<style scoped>
@import "~@/assets/bootstrap.min.css";
</style>